<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="common/css/bootstrap.min.css">
  <link rel="stylesheet" href="common/css/swiper.min.css">
  <link rel="stylesheet" href="common/css/animate.min.css">
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar" id="gotop">
    <div class="container daohang">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Brand" src="http://shanzhouweb.com/images/logo.png" alt="">
          </a>
          <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#bs-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="nav-active"><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">优势介绍</a></li>
                <li><a href="#">服务项目</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
  </nav>
  <!-- 轮播图 -->
  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../../common/images/banner_one.png" class="img-responsive" alt="...">
          </div>
          <div class="swiper-slide">
            <img src="../../../common/images/banner_two.png" class="img-responsive" alt="...">
          </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
  </div>
  <!-- 客服 -->
  <a href="javascript:void(0)" class="kefu">
    <div class="qq tada animated infinite"></div>
  </a>
  <!-- 内容区域 -->
  <div class="main-content">
    <!-- 服务 -->
    <div class="service container">
      <div class="service-tit section-tit">我们的服务</div>
      <div class="service-subtit section-subtit">提供专业的设计，为你提供解决方法</div>
      <div class="service-1 col-md-4">
        <div class="service-head">
          <div class="service_1"></div>
          <div>
            <div class="zh">交互原型设计</div>
            <div class="en">INTERACTIVE PROTOTYPE DESIGN</div>
          </div>
        </div>
        <div class="service-body section-body">
            原型设计是交互设计师与PD、PM、网站开发工程师沟通的好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。
        </div>
      </div>
      <div class="service-2 col-md-4">
          <div class="service-head">
            <div class="service_2"></div>
            <div>
              <div class="zh">移动产品设计</div>
              <div class="en">MOBILE PRODUCT DESIGN</div>
            </div>
          </div>
          <div class="service-body section-body">
              移动手机UI设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解。
          </div>
      </div>
      <div class="service-3 col-md-4">
          <div class="service-head">
            <div class="service_3"></div>
            <div>
              <div class="zh">软件界面设计</div>
              <div class="en">SOFTWARE INTERFACEDESIGN</div>
            </div>
          </div>
          <div class="service-body section-body">
              UI(User Interface)即用户界面，也称人机接口。是指用户和某些系统进行交互方法的集合，这些系统不单单指电脑程序，还包括某种特定的机器，设备，复杂的工具等。
          </div>
      </div>
    </div>
    <!-- 关于我们 -->
    <div class="about container">
      <div class="col-md-6 col-sm-6">
        <div>
          <img src="../../../common/images/about_img4.png" alt="" class="img-responsive">
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="about-tit section-tit">关于我们</div>
        <div class="about-body section-body">
          石家庄山舟网络技术有限公司是众多世界500强、集团和上市公司的长期合作伙伴。 这里拥有无敌的创意、精美的视觉、前沿的意识和前瞻性思维！打破传统网站模式，让所有企业能够在短时间内拥有一套高端网站。
        </div>
        <div class="about-more hidden-xs">
          Continue reading
          <div class="more-arrow"></div>
        </div>
        <a href="about.html">
          <div class="about-more-btn pull-right animated rubberBand infinite">查看更多</div>
        </a>
      </div>
    </div>
    <!-- 服务项目 -->
    <div class="category container">
      <div class="category-tit section-tit">服务项目</div>
      <div class="category-subtit section-subtit">帮助企业建立市场形象，我们与企业共同成长</div>
      <div class="col-md-4 col-sm-4">
        <img src="../../../common/images/project_img1.png" alt="" class="img-responsive">
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="../../../common/images/project_img2.png" alt="" class="img-responsive">
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="../../../common/images/project_img3.png" alt="" class="img-responsive">
      </div>
    </div>
    <!-- 优势 -->
    <div class="advantag container">
      <div class="col-md-6">
        <div class="advantage-left">
          <div class="advantage-tit section-tit">我们的优势</div>
          <div class="advantage-body section-body">我们是一家以创意为基准的设计型网络企业；我们在网站策划或品牌推广方面具备独特见解，并凭借着网络推广、产品服务、线下活动等方面巩固品牌价值；我们的使命是确保作品给客户的印象深刻认同，重塑全新的企业形象。</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="advantage-right">
          <div class="advantage-right-item right-item-1">
            <div class="ad-right-left ad-right-1-left"></div>
            <div class="ad-right-1-right">
              <div class="right-item-tit">一站式服务</div>
              <div class="right-item-word">买域名、备案、服务器租赁操作系统部署等一步到位</div>
            </div>
          </div>
          <div class="advantage-right-item right-item-2">
            <div class="ad-right-left ad-right-2-left"></div>
            <div class="ad-right-2-right">
              <div class="right-item-tit">安全稳定</div>
              <div class="right-item-word">定期杀毒黑客防护实时监控，快速解决故障及问题</div>
            </div>
          </div>
          <div class="advantage-right-item right-item-3">
            <div class="ad-right-left ad-right-3-left"></div>
            <div class="ad-right-3-right">
              <div class="right-item-tit">专业资源技术</div>
              <div class="right-item-word">来自百度、小米、360等20年互联网行业经验的技术团队</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 团队 -->
    <div class="team container">
      <div class="col-md-6">
        <div class="team-left">
          <div class="team-tit section-tit">我们的团队</div>
          <div class="team-body section-body">我们是追求品质与力求不断超越自己的团队，每一位成员也是亲密的伙伴，与公司一起成长与发展。我们尊重每次合作的机会与挑战，不断精进，力求完美。</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="team-right">
          <img src="../../../common/images/youshi_img4.png" alt="" class="img-responsive">
        </div>
      </div>
    </div>
    <!-- 联系我们 -->
    <div class="contact container">
      <div class="col-md-6">
        <div class="contact-left">
          <div class="contact-tit section-tit">CONTACT US</div>
          <div class="contact-subtit section-subtit">联系我们</div>
          <div class="hint">发表您的留言：</div>
          <form action="#" class="form-horizontal" id="myform">
            <div class="form-group">
              <label for="1">姓名：</label>
              <input type="text" maxlength="5">
            </div>
            <div class="form-group">
              <label for="1">邮箱：</label>
              <input type="email">
            </div>
            <div class="form-group">
              <label for="1">电话：</label>
              <input type="tel" maxlength="11">
            </div>
            <div class="form-group">
              <label for="1" style="vertical-align:top">内容：</label>
              <textarea cols="30" rows="10" maxlength="200"></textarea>
            </div>
            <input class="submit animated swing" type="button" value="提交留言">
          </form>
        </div>
        
      </div>
      <div class="col-right col-md-6 hidden-xs">
        <div class="contact-right">
          <div class="phone">
            <div class="ico"></div>
            <div>
              <div class="name">电话</div>
              <div class="ctt">19943408127</div>
            </div>
          </div>
          <div class="email">
            <div class="ico"></div>
            <div>
              <div class="name">邮箱</div>
              <div class="ctt">shanzhouwangluo@qq.com</div>
            </div>
          </div>
          <div class="address">
            <div class="ico"></div>
            <div>
              <div class="name">地址</div>
              <div class="ctt">河北省石家庄市长安区嘉禾广场4号楼19层</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#gotop" class="gotop">
    <div class="arrow"></div>
  </a>
  <div class="page-bottom">©2018 石家庄山舟网络技术有限公司 版权所有&nbsp;&nbsp;&nbsp;&nbsp;冀ICP备18027033号-1</div>
</body>
<script src="common/js/jquery-3.3.1.min.js"></script>
<script src="common/js/bootstrap.min.js"></script>
<script src="common/js/swiper.min.js"></script>
<script src="common/js/scrollreveal.min.js"></script>
<script src="common/js/anime.min.js"></script>
</html>
<script>
  let mySwiper = new Swiper('.swiper-container', {
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      allowTouchMove: false,
      autoplay: {
        delay: 5000
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })

    $(document).scroll(function () {
      $(document).scrollTop() > 200 ? $('.gotop').show() : $('.gotop').hide()
    })

    let sr = new ScrollReveal({ reset: true });

    sr.reveal('.service-1', { distance: '100%', delay: 0, mobile: false })
    // sr.reveal('.service-1',{distance:'100%',delay:0,origin:'left',scale:0.5,desktop:false,reset:false})
    sr.reveal('.service-2', { distance: '100%', delay: 300, mobile: false })
    // sr.reveal('.service-1',{distance:'100%',delay:0,origin:'left',scale:0.5,desktop:false,reset:false})
    sr.reveal('.service-3', { distance: '100%', delay: 600, mobile: false })
    // sr.reveal('.service-1',{distance:'100%',delay:0,origin:'left',scale:0.5,desktop:false,reset:false})

    sr.reveal('.about', { opacity: 0, duration: 3000 })

    sr.reveal('.category img', { scale: 0.1, duration: 1000 })

    sr.reveal('.advantage-left', { distance: '50%', delay: 0, origin: 'top', mobile: false })

    sr.reveal('.right-item-1', { distance: '50%', delay: 0, origin: 'bottom', mobile: false })
    sr.reveal('.right-item-2', { distance: '100%', delay: 300, origin: 'left', mobile: false })
    sr.reveal('.right-item-3', { distance: '150%', delay: 600, origin: 'right', mobile: false })

    sr.reveal('.team-left', { distance: '100%', origin: 'top', scale: 0, mobile: false })
    sr.reveal('.team-right', { distance: '50%', origin: 'left', scale: 0, mobile: false })

    sr.reveal('.submit', { distance: '100%', origin: 'top', easing: 'ease-in' })
    sr.reveal('.phone', { distance: '100%', delay: 0, origin: 'top', scale: 0.3, mobile: false })
    sr.reveal('.email', { distance: '100%', delay: 0, origin: 'left', scale: 0.3, mobile: false })
    sr.reveal('.address', { distance: '100%', delay: 0, origin: 'right', scale: 0.3, mobile: false })

    anime({
      targets: '.more-arrow',
      translateX: 50,
      loop: true,
      delay: 1000,
      duration: 2000
    })
</script>